/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable indent */
const path = require('path')
const svgFilePath = path.join(__dirname, './src/assets/svg')
const devServerPort = 8088

module.exports = {
  lintOnSave: true,
  productionSourceMap: false,
  assetsDir: 'static',
  devServer: {
    port: devServerPort,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    progress: false
  },
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  chainWebpack (config) {
    // For more usage about webpack chain
    // See https://github.com/neutrinojs/webpack-chain#getting-started

    // https://webpack.js.org/configuration/devtool/#development
    config
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('eval-cheap-module-source-map')
      )

    config.module
      .rule('vue-svgicon')
      .test(/\.svg$/)
      .include
        .add(svgFilePath)
        .end()
      .use('svgicon')
        .loader('@yzfe/vue-svgicon-loader')
        .options({
          idSeparator: '_',
          svgFilePath
        })

    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
            options.transformAssetUrls = options.transformAssetUrls || {}
            // Set vue-svgicon tag name here ⬇️
            options.transformAssetUrls.SvgIcon = ['data']
            return options
        })
        .end()
      .use('iview-loader')
        .loader('iview-loader')
        .options({
          prefix: false
        })
        .end()

    config.module.rule('svg').exclude.add(svgFilePath)

    config.resolve.alias.set('@icon', svgFilePath)
  }
}
